import React, { Component } from 'react';
import { View, Text, Animated, InteractionManager, Easing, TouchableOpacity, Dimensions, StyleSheet, TouchableWithoutFeedback } from 'react-native';
import { destroySibling } from './showModal';
import { pTx } from "../../utils/dimensions"


export default class NavigateModalSelect extends Component {
    constructor(props) {
        super(props)
        this.state = {
            operation: props.operation
        }

    }
    animated = new Animated.Value(0);

    isShow = false;

    componentDidMount() {
        InteractionManager.runAfterInteractions(() => {
            this.handleAni();
        });
    }

    componentWillUnmount() {
        InteractionManager.runAfterInteractions(() => {
            this.handleAni();
        });
    }

    handleAni = () => {
        Animated.timing(this.animated, {
            toValue: this.isShow ? 0 : 1,
            duration: 250,
            useNativeDriver: true,
            easing: Easing.linear
        }).start(() => this.isShow = !this.isShow);
    };

    render() {
        const opct = this.animated.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1]
        });
        return <Animated.View style={{
            position: 'absolute',
            width: Dimensions.get('screen').width,
            height: Dimensions.get('screen').height,
            backgroundColor: 'rgba(10,12,20,0.6)',
            opacity: opct,
            zIndex: 10
        }}>
            <TouchableWithoutFeedback onPress={() => destroySibling()}>
                <View style={styles.centeredView}>
                    <View style={styles.modalView}>
                        {
                            this.state.operation.map((item, index) => {
                                return (
                                    <Text style={styles.button} onStartShouldSetResponderCapture={(ev) => true} onPress={() => {
                                        item.onPress()
                                        destroySibling()
                                    }} key={index}>{item.text}</Text>
                                )
                            })
                        }
                        <Text style={styles.close} onStartShouldSetResponderCapture={(ev) => true} onPress={() => destroySibling()}>取消</Text>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        </Animated.View>
    }
}

const styles = StyleSheet.create({
    centeredView: {
        flex: 1,
        justifyContent: "flex-end",
        alignItems: "stretch",
    },
    modalView: {
        backgroundColor: "white",
        borderRadius: pTx(10),
        shadowColor: "rgba(0,0,0,0.5)",
        shadowOffset: {
            width: 0,
            height: 1
        },
        shadowOpacity: 0.1,
        shadowRadius: 1,
        elevation: 5,
        backgroundColor: "#fff",
    },
    button: {
        fontSize: pTx(16),
        color: "#0A0C14",
        textAlign: "center",
        paddingVertical: pTx(20),
        borderBottomWidth: 1,
        borderColor: "rgba(175, 181, 189, 0.15)"
    },
    close: {
        paddingTop: pTx(35),
        paddingBottom: pTx(50),
        fontSize: pTx(16),
        color: "#0A0C14",
        textAlign: "center",
        borderTopWidth: pTx(15),
        borderColor: "#F7F7F7"
    }
})